<template>
  <view>
    <!-- 自定义导航栏 -->
    <uni-nav-bar :border="false" :statusBar="true">
      <!-- 导航栏标题 -->
      <view class="display-default navBar-title">
        <text class="navBar-title-text">场馆预约</text>
      </view>
      <!-- 导航栏左侧-我的预约 -->
      <template v-slot:left>
        <view class="display-default" style="border-bottom: .5px solid #ccc;padding-right: 10rpx;" @click="toMySports">
          <image style="width: 55rpx;height: 55rpx;" src="/static/sports/mySports.png" mode=""></image>
          <text>我的预约</text>
        </view>
      </template>
      <!-- 导航栏右侧-仿小程序退出按钮胶囊 -->
      <template v-slot:right>
        <view class="display-default navBar-title-right">
          <!-- 查看更多-3个点 -->
          <view class="display-default" @click="navBarTitleRightItemClick('more')">
            <image class="navBar-title-right-icon" src="/static/selectPress/more.png"></image>
          </view>

          <!-- 查看更多和退出的中线 -->
          <view class="navBar-title-right-midcourtLine"></view>

          <!-- 退出 -->
          <view class="display-default" style="" @click="navBarTitleRightItemClick('exit')">
            <image class="navBar-title-right-icon" style="" src="/static/selectPress/exit.png"></image>
          </view>
        </view>
      </template>
    </uni-nav-bar>

    <!-- 轮播图 -->
    <uni-swiper-dot :info="swiperList" :current="swiperDotCurrentIndex" :dotsStyles="dotsStyles">
      <swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" @change="swiperChange">
        <swiper-item class="swiper-item" v-for="(item,index) in swiperList" :key="'key'+index"
          @click="pressSelect('refresh')">
          <image class="swiper-img" :src="$url+item.slideshowImage"></image>
          <text class="swiper-text astrict-text" style="width: 70%;">{{item.title}}</text>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>

    <!-- 场馆列表 -->
    <view class="sports-item" v-for="(item,index) in sportsList" :key="index">
      <image class="sports-item-left" :src="$url+item.cover" mode="aspectFill" @click="previewImage(item.cover, index)">
      </image>
      <view class="sports-item-right">
        <text class="astrict-text" style="font-size: 18px;">{{item.name}}</text>
        <text class="astrict-text" style="color: #999;">类型：{{item.type}}</text>
        <text class="astrict-text" style="color: #999;">联系电话：{{item.phoneNumber}}</text>
        <text class="astrict-text" style="color: #999;" v-if="item.address">地址：{{item.address}}</text>
        <text class="astrict-text" style="color: red;">费用：{{item.money}}元起</text>
      </view>
      <view class="sports-item-button-box">
        <button class="sports-item-button" type="primary" @click="reserveSports(item.sportsId)">立即预约</button>
      </view>
    </view>

    <!-- 右上角胶囊选项弹出层 -->
    <uni-popup ref="pressPopup" type="bottom">
      <view class="pressDialog-popup-body">
        <view class="display-default" style="justify-content: flex-start;padding: 30rpx;">
          <view class="select-press-item" @click="pressSelect('refresh')">
            <uni-icons style="background: #eee;padding: 20rpx;border-radius: 60px;" custom-prefix="iconfont"
              type="refreshempty" size="55rpx" color="#000"></uni-icons>
            <text style="color: #000;font-size: 12px;padding: 10rpx 0 0 20rpx;">刷新</text>
          </view>
        </view>
        <button class="pressDialog-button-cancel" @click="popupClose('pressPopup')">取消</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 轮播图数据
        swiperList: [],
        // 场馆预约信息
        sportsList: [],
        // 轮播图指示点索引
        swiperDotCurrentIndex: 0,
        // 轮播图指示点样式
        dotsStyles: {
          selectedBackgroundColor: '#fff',
        },
        token: ''
      };
    },
    async onLoad() {
      uni.showLoading({
        title: '',
        mask: false
      });

      this.token = await uni.getStorageSync('token')

      await this.getSwiperList()
      await this.getAllSports()

      uni.hideLoading()
    },
    onShow() {
      this.token = uni.getStorageSync('token')
    },
    methods: {
      /**
       * @description 查询所有场馆信息，可根据场馆类型查询
       */
      async getAllSports(type) {
        await this.$http.sports.getAllSportsInfo(type).then(res => {
          console.log("res: " + JSON.stringify(res));
          if (res.code == 401) {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              position: 'center'
            })
            return
          }
          if (!res.code) {
            uni.showToast({
              title: '服务器开小差了',
              icon: 'none',
              position: 'center'
            });
            return
          }

          this.sportsList = res.data.sort(function(a, b) {
            return a.sort - b.sort // 对排序字段进行排序
          })
        }).catch(err => {
          console.log("err: " + JSON.stringify(err));
        })
      },

      /**
       * @description 顶部导航栏more和exit点击事件
       */
      navBarTitleRightItemClick(name) {
        if (name == 'exit') {
          uni.navigateBack({
            delta: 9
          })
        }

        if (name == 'more') {
          this.$refs.pressPopup.open()
          console.log("点击3个点");
          return
        }
        console.log(name);
      },

      /**
       * @description popup弹出层功能列表点击
       */
      pressSelect(name) {
        console.log("name: ", name);

        if (name == 'refresh') {
          uni.redirectTo({
            url: '/pages/sportsView/sportsView'
          })
          return
        }
      },

      /**
       * @description popup弹出层关闭事件
       */
      popupClose(name) {
        if (name == 'pressPopup') {
          this.$refs.pressPopup.close()
        }
      },

      /**
       * @description 预览多张图片Item点击
       */
      previewImage(imgUrl, index) {
        let formatImgUrl = this.$url + imgUrl

        uni.previewImage({
          urls: [formatImgUrl], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
          current: '' // 当前显示图片的http链接，默认是第一个
        })
      },

      /**
       * @description 跳转到我的预约
       */
      toMySports() {
        if (!this.token) {
          // #ifdef H5
          // this.$refs.loginPopup.open() 
          return
          // #endif 

          // #ifndef H5
          uni.navigateTo({
            url: "/pages/customPopup/customPopup?title=该功能需要登录后使用，是否登录？&confirmText=去登录&type=login"
          })
          return
          // #endif
        }

        uni.navigateTo({
          url: '/pages/sportsView/mySports/mySports'
        })
        return
      },

      /**
       * @description 立即预定按钮
       */
      reserveSports(sportsId) {
        console.log("sportsId: ", sportsId);
        if (!this.token) {
          // #ifdef H5
          // this.$refs.loginPopup.open() 
          return
          // #endif

          // #ifndef H5
          uni.navigateTo({
            url: "/pages/customPopup/customPopup?title=该功能需要登录后使用，是否登录？&confirmText=去登录&type=login"
          })
          return
          // #endif
        }

        uni.navigateTo({
          url: `/pages/sportsView/sportsViewDetail/sportsViewDetail?sportsId=${sportsId}`
        })
      },

      /**
       * @description 获取场馆预约轮播图
       */
      async getSwiperList() {
        await this.$http.index.getSlideshowAllByType('1').then(res => {
          // console.log("res: " + JSON.stringify(res));
          if (res.code == 401) {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              position: 'center'
            })
            return
          }
          if (!res.code) {
            uni.showToast({
              title: '服务器开小差了',
              icon: 'none',
              position: 'center'
            });
            return
          }

          this.swiperList = res.data.sort(function(a, b) {
            return a.sort - b.sort // 对排序字段进行排序
          })
        }).catch(err => {
          console.log("err: " + JSON.stringify(err));
        })
      },

      /**
       * @description 监听首页轮播图swiper滚动
       * @param e 首页轮播图swiper滚动时current值改变时返回的值
       */
      swiperChange(e) {
        this.swiperDotCurrentIndex = e.detail.current
      }
    }
  }
</script>

<style lang="scss">
  page {
    background: #fff;
  }

  // 自定义导航栏样式-1
  /deep/ .uni-navbar__header {
    padding: 0px;
  }

  /deep/ .uni-navbar__header-btns-left {
    flex: 1;
  }

  /deep/ .uni-navbar__header-btns-right {
    flex: 1;
  }

  // 自定义导航栏样式
  .navBar-title {
    text-align: center;
    width: 100%;
    height: 100%;

    // 导航栏标题样式
    & .navBar-title-text {
      font-size: 17px;
    }
  }

  // 导航栏右侧，仿小程序胶囊图标样式
  .navBar-title-right {
    border: 0.9px solid #cdcdcd;
    border-radius: 60px;
    height: 65%;

    // 图标样式
    & .navBar-title-right-icon {
      width: 45rpx;
      height: 45rpx;
      padding: 15rpx 22rpx;
    }

    // 中线
    & .navBar-title-right-midcourtLine {
      height: 60%;
      width: 1px;
      border-left: 1px solid #e3e3e3;
    }
  }

  // 轮播图
  .swiper-item {
    position: relative;
    display: flex;
    background: #fff;
    justify-content: center;

    & .swiper-img {
      border-radius: 15px;
      width: 95%;
      height: 100%;
    }

    & .swiper-text {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 45rpx;
      margin: auto;
      font-size: 16px;
      color: #fff;
      text-align: center;
    }
  }

  // 场馆列表item
  .sports-item {
    display: flex;
    padding: 25rpx;
    position: relative;

    // 场馆列表左侧
    & .sports-item-left {
      width: 35%;
      height: 240rpx;
      margin-right: 5%;
    }

    // 场馆列表右侧
    & .sports-item-right {
      display: flex;
      flex-direction: column;
      width: 60%;
    }

    // 场馆列表立即预定按钮容器
    & .sports-item-button-box {
      display: flex;
      justify-content: flex-end;
      position: absolute;
      bottom: 25rpx;
      right: 25rpx;

      // 场馆列表立即预定按钮
      & .sports-item-button {
        border-radius: 20px;
        font-size: 11px;
        padding: 0rpx 40rpx;
      }
    }
  }


  // 右上角胶囊选项弹出层样式
  .pressDialog-popup-body {
    padding-bottom: 10rpx;
    border-radius: 10px 10px 0 0;
    background: #fff;

    & .select-press-item {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-right: 50rpx;
    }

    & .pressDialog-button-cancel {
      background: #eee;
      margin-top: 10rpx;
      padding: 5rpx 0;
      font-size: 16px;
      width: 95%;
    }
  }
</style>
